<template>
	<view class="safe-area">
		<view class="diagnosis-page">
			<!-- 背景动画 -->
			<view class="animated-background">
				<view class="circle circle-1"></view>
				<view class="circle circle-2"></view>
				<view class="circle circle-3"></view>
			</view>

			<!-- 顶部标题 -->
			<view class="header">
				<text class="title">舌诊分析</text>
				<text class="subtitle">AI 智能诊断 · 即刻生成</text>
			</view>

			<!-- 图片预览区域 -->
			<view class="preview-section">
				<view class="preview-card">
					<image :src="imageUrl" mode="aspectFit" class="preview-image"></image>
					<view class="image-overlay">
						<view class="scan-line"></view>
					</view>
					<!-- 扫描动画装饰 -->
					<view class="corner-decoration top-left"></view>
					<view class="corner-decoration top-right"></view>
					<view class="corner-decoration bottom-left"></view>
					<view class="corner-decoration bottom-right"></view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="btn btn-retry" @tap="reupload">
					<text class="btn-icon">↺</text>
					<text>重新上传</text>
				</button>
				<button class="btn btn-diagnose" @tap="startDiagnosis" :disabled="diagnosing">
					<text class="btn-icon">{{ diagnosing ? '⋯' : '✓' }}</text>
					<text>{{ diagnosing ? '诊断中...' : '分析舌苔' }}</text>
				</button>
			</view>

			<!-- 加载动画 -->
			<view class="loading-overlay" v-if="diagnosing">
				<view class="loading-content">
					<view class="loading-rings">
						<view class="ring ring-1"></view>
						<view class="ring ring-2"></view>
						<view class="ring ring-3"></view>
					</view>
					<text class="loading-text">AI 正在分析中</text>
					<text class="loading-subtext">请稍候...</text>
				</view>
			</view>

			<!-- 诊断结果区域 -->
			<view class="diagnosis-result" v-if="diagnosisResult">

				<!-- 操作按钮区域 -->
				<view class="view-records">
				  <button class="continue-btn" @tap="goToQuestionnaire">
					继续填写问卷
					<text class="arrow">→</text>
				  </button>
				</view>

            <view class="result-card">
                <view class="result-header">
                    <text class="result-title">舌诊分析结果</text>
                    <text class="result-subtitle">Traditional Chinese Medicine Analysis</text>
                </view>

                <view class="result-details">
                    <!-- 舌苔质地 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box coating">苔</view>
                            <text class="item-title">苔质</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.coatingQuality.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.coatingQuality.diagnosis }}</text>
                        </view>
                    </view>

                    <!-- 舌苔颜色 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box color">色</view>
                            <text class="item-title">苔色</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.coatingColor.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.coatingColor.diagnosis }}</text>
                        </view>
                    </view>

                    <!-- 舌质颜色 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box body">质</view>
                            <text class="item-title">舌色</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.tongueColor.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.tongueColor.diagnosis }}</text>
                        </view>
                    </view>

                    <!-- 舌神 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box spirit">神</view>
                            <text class="item-title">舌神</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.tongueVitality.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.tongueVitality.diagnosis }}</text>
                        </view>
                    </view>

                    <!-- 舌形状态 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box shape">形</view>
                            <text class="item-title">舌形</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.tongueShape.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.tongueShape.diagnosis }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted,
	getCurrentInstance
} from 'vue'
import request from "@/utils/request"

const imageUrl = ref('')
const diagnosing = ref(false)
const diagnosisResult = ref(null)

onMounted(() => {
	// 获取由上一个页面传递的数据
	const instance = getCurrentInstance().proxy
	const eventChannel = instance.getOpenerEventChannel();
	eventChannel.on('acceptDataFromOpenerPage', function (data) {
	    // 将接收到的数据赋值给响应式变量
	    imageUrl.value = data.url
	})
	console.log(imageUrl.value)
})

// 重新上传
const reupload = async () => {
	// 获取图片、从摄像头or相册
	const res = await uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['camera', 'album']
	})

	// 上传图片到后端
	try {
		const ret = await request.uploadFile(res.tempFilePaths[0])
		imageUrl.value = ret.data
	} catch (error) {
		uni.showToast({
			title: error || '上传图片失败',
			icon: 'none'
		})
	}
}

// 开始诊断
const startDiagnosis = async () => {
	if (!imageUrl.value || diagnosing.value) return

	diagnosing.value = true
	try {

		const res = await request.post("/tongue/diagnosis", {
			url: imageUrl.value,
			userId: uni.getStorageSync('userInfo').id
		})

		// 处理诊断结果
		diagnosisResult.value = res.data
    // 存储起来
    uni.setStorageSync('tongueDescription', res.data)
		diagnosing.value = false

		// 添加提示消息
		uni.showToast({
			title: '请继续完成问卷',
			duration: 2000
		})

	} catch (e) {
		uni.showToast({
			title: e || '其他异常',
			icon: 'none'
		})
		diagnosing.value = false
	} finally {
		setTimeout(() => {
			diagnosing.value = false
		}, 2000)
	}
}

// 跳转问卷页面
const goToQuestionnaire = () => {
	uni.navigateTo({
		url: '/pages/question/index'
	})
}

defineOptions({
	navigationStyle: 'custom'
})
</script>

<style scoped lang="scss">
.safe-area {
	padding-top: var(--status-bar-height);
	min-height: 100vh;
	background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #edf7ed 100%);
}

.diagnosis-page {
	min-height: calc(100vh - var(--status-bar-height));
	padding: 30rpx;
	position: relative;
	overflow: hidden;
}

// 背景动画
.animated-background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;

	.circle {
		position: absolute;
		border-radius: 50%;
		opacity: 0.1;

		&-1 {
			width: 600rpx;
			height: 600rpx;
			background: linear-gradient(45deg, #ff6b6b 0%, #f06292 100%);
			top: -200rpx;
			right: -200rpx;
			animation: float 15s infinite;
			opacity: 0.08;
		}

		&-2 {
			width: 400rpx;
			height: 400rpx;
			background: linear-gradient(45deg, #4fc3f7 0%, #4dd0e1 100%);
			bottom: -100rpx;
			left: -100rpx;
			animation: float 20s infinite reverse;
			opacity: 0.08;
		}

		&-3 {
			width: 300rpx;
			height: 300rpx;
			background: linear-gradient(45deg, #81c784 0%, #4db6ac 100%);
			top: 40%;
			right: -50rpx;
			animation: float 25s infinite;
			opacity: 0.08;
		}
	}
}

// 顶部标题
.header {
	position: relative;
	z-index: 1;
	text-align: center;
	margin-bottom: 40rpx;

	.title {
		font-size: 48rpx;
		font-weight: 800;
		background: linear-gradient(45deg, #35e5e5, #4aaa24);
		-webkit-background-clip: text;
		color: transparent;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.subtitle {
		font-size: 24rpx;
		color: #34495e;
		font-weight: 500;
		margin-top: 12rpx;
		display: block;
	}
}

// 预览区域
.preview-section {
	position: relative;
	z-index: 1;
	margin: 40rpx 0;
	padding: 20rpx;

	.preview-card {
		position: relative;
		border-radius: 30rpx;
		overflow: hidden;
		box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		padding: 20rpx;

		.preview-image {
			width: 100%;
			height: 600rpx;
			border-radius: 20rpx;
			display: block;
		}

		.image-overlay {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			right: 20rpx;
			bottom: 20rpx;
			border-radius: 20rpx;
			background: linear-gradient(180deg,
					rgba(54, 209, 220, 0.1) 0%,
					rgba(91, 134, 229, 0.1) 100%);

			.scan-line {
				position: absolute;
				left: 0;
				right: 0;
				height: 4rpx;
				background: linear-gradient(90deg,
						transparent,
						rgba(54, 209, 220, 0.8),
						transparent);
				animation: scan 2s linear infinite;
			}
		}

		// 装饰性边角
		.corner-decoration {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			border-style: solid;
			border-color: rgba(54, 209, 220, 0.6);
			border-width: 4rpx;

			&.top-left {
				top: 10rpx;
				left: 10rpx;
				border-right: none;
				border-bottom: none;
			}

			&.top-right {
				top: 10rpx;
				right: 10rpx;
				border-left: none;
				border-bottom: none;
			}

			&.bottom-left {
				bottom: 10rpx;
				left: 10rpx;
				border-right: none;
				border-top: none;
			}

			&.bottom-right {
				bottom: 10rpx;
				right: 10rpx;
				border-left: none;
				border-top: none;
			}
		}
	}
}

// 按钮样式
.action-buttons {
	display: flex;
	justify-content: space-between;
	gap: 20rpx;
	margin-top: 40rpx;
	padding: 0 20rpx;

	.btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;

		.btn-icon {
			margin-right: 10rpx;
			font-size: 32rpx;
		}

		&.btn-retry {
			background: rgba(255, 255, 255, 0.9);
			color: #37474f;
			border: 2rpx solid #cfd8dc;

			&:active {
				background: #f5f5f5;
			}
		}

		&.btn-diagnose {
			background: linear-gradient(45deg, #35e5e5, #4aaa24);
			color: #fff;
			box-shadow: 0 10rpx 20rpx rgba(74, 170, 36, 0.2);

			&:active {
				transform: translateY(4rpx);
				box-shadow: 0 5rpx 10rpx rgba(74, 170, 36, 0.2);
			}

			&:disabled {
				opacity: 0.7;
				transform: none;
			}
		}
	}
}

// 加载动画
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;

	.loading-content {
		text-align: center;

		.loading-rings {
			position: relative;
			width: 120rpx;
			height: 120rpx;
			margin: 0 auto 30rpx;

			.ring {
				position: absolute;
				top: 50%;
				left: 50%;
				border-radius: 50%;
				border: 4rpx solid transparent;
				border-top-color: #35e5e5;
				animation: spin 1s linear infinite;

				&-1 {
					width: 120rpx;
					height: 120rpx;
					margin: -60rpx 0 0 -60rpx;
					border-top-color: #35e5e5;
				}

				&-2 {
					width: 100rpx;
					height: 100rpx;
					margin: -50rpx 0 0 -50rpx;
					border-top-color: #4aaa24;
					animation-delay: 0.2s;
				}

				&-3 {
					width: 80rpx;
					height: 80rpx;
					margin: -40rpx 0 0 -40rpx;
					border-top-color: #35e5e5;
					animation-delay: 0.4s;
				}
			}
		}

		.loading-text {
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 10rpx;
			display: block;
			font-weight: 600;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		}

		.loading-subtext {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.9);
		}
	}
}

// 动画
@keyframes float {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-30rpx, -30rpx);
	}
}

@keyframes scan {
	0% {
		top: 0;
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		top: 100%;
		opacity: 0;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

// 复用 DiagnosisResult 的结果卡片样式
.diagnosis-result {
  margin-top: 40rpx;
  padding: 0 20rpx;


	.diagnosis-result{
		
	}

.view-records {
  margin-top: 40rpx;
  padding: 0 20rpx;

  .continue-btn {
    width: 50%;
    height: 88rpx;
    margin-bottom: 30rpx;
    border-radius: 44rpx;
    background: #ff2828;
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10rpx 20rpx rgba(74, 170, 36, 0.2);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 5rpx 10rpx rgba(74, 170, 36, 0.2);
    }

    .arrow {
      margin-left: 10rpx;
      transition: all 0.3s ease;
    }

    &:active .arrow {
      transform: translateX(10rpx);
    }
  }
}

  .result-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30rpx;
    padding: 40rpx;
    box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);

    .result-header {
      text-align: center;
      margin-bottom: 30rpx;

      .result-title {
        font-size: 40rpx;
        font-weight: 800;
        background: linear-gradient(45deg, #35e5e5, #4aaa24);
        -webkit-background-clip: text;
        color: transparent;
      }

      .result-subtitle {
        font-size: 26rpx;
        color: #666;
        margin-top: 8rpx;
        display: block;
      }
    }

    .result-details {
      .detail-item {
        margin-bottom: 30rpx;

        .item-header {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          .icon-box {
            width: 64rpx;
            height: 64rpx;
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36rpx;
            color: #fff;
            margin-right: 16rpx;

            &.coating {
              background: linear-gradient(135deg, #FF9A9E, #FAD0C4);
            }

            &.color {
              background: linear-gradient(135deg, #A1C4FD, #C2E9FB);
            }

            &.body {
              background: linear-gradient(135deg, #84FAB0, #8FD3F4);
            }

            &.shape {
              background: linear-gradient(135deg, #FFECD2, #FCB69F);
            }

            &.spirit {
              background: linear-gradient(135deg, #B721FF, #21D4FD);
            }
          }

          .item-title {
            font-size: 34rpx;
            font-weight: 600;
            color: #2c3e50;
          }
        }

        .item-content {
          margin-left: 84rpx;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 16rpx;
          padding: 20rpx;

          .feature {
            font-size: 32rpx;
            color: #34495e;
            font-weight: 500;
            display: block;
            margin-bottom: 8rpx;
          }

          .diagnosis {
            font-size: 30rpx;
            color: #7f8c8d;
            line-height: 1.4;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}
.icon-box {
    &.coating {
        background: linear-gradient(45deg, #4db6ac, #26a69a);
    }
    &.color {
        background: linear-gradient(45deg, #7e57c2, #5e35b1);
    }
    &.body {
        background: linear-gradient(45deg, #ef5350, #e53935);
    }
    &.spirit {
        background: linear-gradient(45deg, #66bb6a, #43a047);
    }
    &.shape {
        background: linear-gradient(45deg, #ffa726, #fb8c00);
    }
}
</style>